<template>
	<base-page class="base-form" title="任务详情" @back="onBack">
		<view class="task-detail">
			<view class="task-info">
				<text class="task-details-herder-title">{{taskDetailsData.flowEntryName}}</text>
				<text class="task-details-herder-txt" v-if="taskDetailsData.taskName">当前任务：{{taskDetailsData.taskName}}</text>
				<view class="task-details-herder-user">
					<view class="user-avatar">
						<image :src="headImageUrl" mode=""></image>
					</view>
					<text class="user-name">{{processInstanceInitiator}}</text>
				</view>
			</view>
			<image class="task-details-herder-img"
				:src="[statusImg,statusImg,refuseImg,passImg,stoppedImg,cancelImg,draftImg][taskDetailsData.flowStatus]">
			</image>
		</view>
		<u-tabs
			v-if="taskDetailsData.processInstanceId"
			:list="tableTypeList"
			:is-scroll="false"
			bar-height="6"
			:bold="false"
			:active-color="theme.primary_color"
			@change="tabsChange"
			:current="tableType"
		/>
		<view v-if="taskDetailsData" class="task-data">
			<view class="task-input-box" :style="{display:(tableType==0?'block':'none')}">
				<online-form
					ref="workflowForm"
					v-if="taskDetailsData.formId != null && taskDetailsData.formId !== ''"
					:formId="taskDetailsData.formId"
					:readOnly="taskDetailsData.readOnly"
					:flowInfo="getFlowInfo()"
				/>
				<view class="cc-view">
					<CopyForSelect  v-model="copyItemList" />
					<!-- style="margin: 16px 16px 0px 16px;" -->
				</view>
			</view>
			<taskFlow
				v-if="taskDetailsData.processInstanceId"
				:processInstanceId="taskDetailsData.processInstanceId"
				:style="{display:(tableType==1?'block':'none')}"
				style="height: calc(100% - 64rpx)"
			/>
		</view>
		<view class="task-details-floor" v-if="mainOperation.length > 0 && tableType == 0">
			<view class="btnn" v-if="moreActions.length > 0">
				<image :src="moreIcon" mode="" @click="moreShow = !moreShow"></image>
				<view class="btnList" :style="{top:(moreActions.length*-3)+'rem'}" v-if="moreShow">
					<view class="btnnn" v-for="item in moreActions" :key="item.operation.id" @click.stop="handlerOperation(item.operation)" >{{item.text}}</view>
				</view>
			</view>
			<u-button
				class="menu-btn"
				style="width: 100%"
				:custom-style="customStyle"
				:type="getButtonType(operation.type)"
			 	v-for="operation in mainOperation"
			 	:key="operation.id"
			 	size="medium"
			 	@click="handlerOperation(operation)"
			>
				{{ operation.label }}
			</u-button>
		</view>
		<view class="contents" v-if="showCommitDlg">
			<TaskCommit v-if="showCommitDlg" :title="commitInfo.title"
				:operation="commitInfo.operation"
				:processInstanceId="commitInfo.processInstanceId"
				:processDefinitionId="processDefinitionId"
				:taskId="commitInfo.taskId"
				:finishedInfo="commitInfo.finishedInfo"
				@close="onTaskCommitCallback"
			></TaskCommit>
		</view>
	</base-page>
</template>

<script>
	import style from 'uni.scss';
	import statusImg from '@/static/icon/approval-icon.png'
	import passImg from '@/static/icon/pass-icon.png'
	import refuseImg from '@/static/icon/refuse-icon.png'
	import draftImg from '@/static/icon/draft-icon.png'
	import cancelImg from '@/static/icon/cancel-icon.png'
	import stoppedImg from '@/static/icon/stopped-icon.png'
	import closeIcon from '@/static/icon/close-icon.png'
	import addIcon from '@/static/icon/add-icon.png'
	import moreIcon from '@/static/icon/more-icon.png'
	import CopyForSelect from '../components/copyForSelect/index.vue'
	import taskFlow from '../components/taskCommentList.vue'
	import { FlowOperationController } from '@/api/flowController.js';
	import TaskCommit from '../components/taskCommit.vue';
	import { getBoundingClientRect, getHeadImageUrl, showMessage } from "@/utils";
	import flowMixins from '../mixins/flowMixins';
	
	export default {
		name: 'handlerFlowTask',
		mixins: [flowMixins],
		components: {
			CopyForSelect,
			taskFlow,
			TaskCommit,
		},
		data() {
			const {
				windowWidth,
				statusBarHeight
			} = uni.getSystemInfoSync()
      const rect = getBoundingClientRect(windowWidth, statusBarHeight);
			return {
				windowWidth: windowWidth,
				statusBarHeight: statusBarHeight,
				titleNavHeight: (rect.top - statusBarHeight) * 2 + rect.height,
				emptyWidth: rect.left - 10,
				moreShow:false,
				showCommitDlg:false,
				statusImg: statusImg,
				passImg: passImg,
				refuseImg: refuseImg,
				draftImg: draftImg,
				cancelImg: cancelImg,
				stoppedImg: stoppedImg,
				tableType: 0,
				closeIcon: closeIcon,
				addIcon: addIcon,
				moreIcon: moreIcon,
				customStyle:{
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					borderRadius: '0',
					flex: '1',
					width: '100%'
				},
				taskDetailsData: undefined,
				tableTypeList: [{
					name: '表单详情'
				}, {
					name: '审批记录'
				}],
				itemStyle: {
					"height": "40px"
				},
				inactiveStyle: {
					"color": "#666666",
					"font-size": "1rem",
				},
				activeStyle: {
					"color": style.primary_color,
					"font-size": "1rem",
					"font-weight": "bold"
				},
				commitInfo:{
					operation: undefined,
					processInstanceId: undefined,
					taskId: undefined,
					finishedInfo: undefined
				},
				stepsList: [],
				selectedUser: {
					selectedUserList: []
				},
				copyItemList: [],
				operationList:[],//操作按钮

				isRuntime: undefined,
				// 流程标识
				processDefinitionKey: null,
				// 在线表单formId
				formId: null,
				// 只读页面
				readOnly: null,
				// 流程定义id
				processDefinitionId: null,
				// 当前任务节点id
				taskId: null,
				// 流程名称
				flowEntryName: null,
				// 发起人
				processInstanceInitiator: null,
				// 发起人头像
				headImageUrl: null,
				// 当前任务节点名称
				taskName: null,
				// 当前任务节点变量列表
				variableList: null,
				// 流程状态
				flowStatus: null
			}
		},
		methods: {
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 获得路由组件下的函数
			 * @param {string} functionName 函数名称
			 * @returns {function}
			 */
			getRouterCompomentFunction (functionName) {
        let routerCompoment = this.taskDetailsData ? this.$refs[this.taskDetailsData.routerName] : undefined;
        return (routerCompoment && typeof routerCompoment[functionName] === 'function') ? routerCompoment[functionName] : undefined;
			},
			startImpl (operation, formData, copyItemList) {
				if (this.isOnlineForm) {
					FlowOperationController.startAndTakeUserTask(this, {
						processDefinitionKey: this.processDefinitionKey,
						masterData: formData.masterData || {},
						slaveData: formData.slaveData,
						taskVariableData: {
							...formData.taskVariableData,
							latestApprovalStatus: operation.latestApprovalStatus
						},
						flowTaskCommentDto: {
							approvalType: operation.type
						},
						copyData: (copyItemList || []).reduce((retObj, item) => {
							retObj[item.type] = item.id;
							return retObj;
						}, {})
					}).then(res => {
						showMessage('启动成功！', 'success');
						this.handlerClose();
					}).catch(e => {});
				} else {
					let startImpl = this.getRouterCompomentFunction('startImpl');
					if (startImpl) {
						startImpl(operation, formData, copyItemList).then(res => {
							this.handlerClose();
						}).catch(e => {});
					} else {
						showMessage('当前流程并未实现启动功能，请联系管理员！', 'error');
					}
				}
			},
			submitImpl (operation, formData, copyItemList, taskCommitData) {
				return new Promise((resolve, reject) => {
					if (this.isOnlineForm) {
						// 在线表单数据提交
						let params = {
							taskId: this.taskId,
							processInstanceId: this.taskDetailsData.processInstanceId,
							masterData: formData.masterData,
							slaveData: formData.slaveData,
							flowTaskCommentDto: {
								taskComment: (taskCommitData || {}).message,
								approvalType: operation.type,
								delegateAssignee: operation.type === this.SysFlowTaskOperationType.TRANSFER ? (taskCommitData || {}).assignee : undefined
							},
							taskVariableData: {
								...formData.taskVariableData,
								latestApprovalStatus: operation.latestApprovalStatus
							},
							copyData: (copyItemList || []).reduce((retObj, item) => {
								retObj[item.type] = item.id;
								return retObj;
							}, {})
						}

						FlowOperationController.submitUserTask(this, params).then(res => {
							showMessage('提交成功！', 'success');
							resolve();
						}).catch(e => {
							reject(e);
						});
					} else {
						let submitImpl = this.getRouterCompomentFunction('submitImpl');
						if (submitImpl) {
							submitImpl(operation, formData, copyItemList, taskCommitData).then(res => {
								showMessage('提交成功！', 'success');
								resolve();
							}).catch(e => {
								reject(e);
							});
						} else {
							showMessage('当前流程并未实现提交功能，请联系管理员！', 'error');
							reject();
						}
					}
				});
			},
			getButtonType (type) {
				switch (type) {
					case this.SysFlowTaskOperationType.AGREE:
					case this.SysFlowTaskOperationType.TRANSFER:
					case this.SysFlowTaskOperationType.CO_SIGN:
					case this.SysFlowTaskOperationType.SIGN_REDUCTION:
					case this.SysFlowTaskOperationType.BFORE_CONSIGN:
					case this.SysFlowTaskOperationType.AFTER_CONSIGN:
					case this.SysFlowTaskOperationType.MULTI_AGREE:
					case this.SysFlowTaskOperationType.MULTI_SIGN:
					case this.SysFlowTaskOperationType.SET_ASSIGNEE:
						return 'primary';
					case this.SysFlowTaskOperationType.SAVE:
						return 'success';
					case this.SysFlowTaskOperationType.REFUSE:
					case this.SysFlowTaskOperationType.PARALLEL_REFUSE:
					case this.SysFlowTaskOperationType.MULTI_REFUSE:
						return 'default';
					case this.SysFlowTaskOperationType.REJECT:
					case this.SysFlowTaskOperationType.REJECT_TO_START:
					case this.SysFlowTaskOperationType.REJECT_TO_TASK:
					case this.SysFlowTaskOperationType.REVOKE:
						return 'error';
					default: return 'default';
				}
			},
			handlerClose(){
				uni.navigateBack()
			},
			tabsChange(index) {
				this.tableType = index
			},
			handlerOperation (operation) {
				if (this.taskDetailsData.processInstanceId == null && this.taskId == null) {
					this.handlerStart(operation, this.copyItemList);
				} else {
					this.handlerSubmit(operation, this.copyItemList);
				}
			},
			async handlerSubmit (operation, copyItemList) {
				let formData = await this.getMasterData(operation.type);
				this.preHandlerOperation(operation, false, copyItemList, formData).then(taskCommitData => {
					this.onTaskCommitCallback(true, taskCommitData);
				}).catch(e => {});
			},
			async handlerStart (operation, copyItemList) {
				let formData = await this.getMasterData(operation.type);
				this.preHandlerOperation(operation, true, copyItemList, formData).then(taskCommitData => {
					if (formData) {
						formData = this.buildFormData(operation, formData, taskCommitData);
						this.startImpl(operation, formData, copyItemList);
					}
				}).catch(e => {});
			},
			getFlowInfo() {
				return {
					processInstanceId: this.taskDetailsData.processInstanceId,
					taskId: this.taskDetailsData.taskId,
					processDefinitionKey: this.taskDetailsData.processDefinitionKey,
					processInstanceInitiator: this.taskDetailsData.processInstanceInitiator,
					messageId: this.taskDetailsData.messageId,
					isRuntime: this.taskDetailsData.isRuntime,
					isDraft: this.taskDetailsData.isDraft
				}
			},
			buildFormData (operation, formData, taskCommitData) {
				let assignee = ((taskCommitData || {}).assignee || '').split(',');
				if (operation.type === this.SysFlowTaskOperationType.MULTI_SIGN) {
					// 会签操作设置多实例处理人集合
					if (formData.taskVariableData == null) formData.taskVariableData = {};
					formData.taskVariableData.assigneeList = assignee;
				} else if (operation.type === this.SysFlowTaskOperationType.SET_ASSIGNEE) {
					// 设置下一个任务节点处理人
					if (formData.taskVariableData == null) formData.taskVariableData = {};
					formData.taskVariableData.appointedAssignee = Array.isArray(assignee) ? assignee.join(',') : undefined;
				}
				return formData;
			},
			async getMasterData (operationType) {
				// 不需要获取表单数据的操作
				let tempList = [
					this.SysFlowTaskOperationType.CO_SIGN,
					this.SysFlowTaskOperationType.SIGN_REDUCTION,
					this.SysFlowTaskOperationType.BFORE_CONSIGN,
					this.SysFlowTaskOperationType.AFTER_CONSIGN,
					this.SysFlowTaskOperationType.FREE_JUMP,
					this.SysFlowTaskOperationType.REJECT,
					this.SysFlowTaskOperationType.REJECT_TO_TASK,
					this.SysFlowTaskOperationType.REJECT_TO_START,
					this.SysFlowTaskOperationType.REVOKE
				];
				if (tempList.indexOf(operationType) !== -1) return Promise.resolve();
				if (!this.isOnlineForm) {
					// 获得静态表单页面的getMasterData函数
					let funGetMasterData = this.getRouterCompomentFunction('getMasterData');
					if (funGetMasterData != null) {
						return funGetMasterData(this.variableList);
					} else {
						throw new Error('当前流程并未实现获取表单数据功能，请联系管理员！');
					}
				} else {
					if (this.$refs.workflowForm && typeof this.$refs.workflowForm.getFormData === 'function') {
						return this.$refs.workflowForm.getFormData(false, this.variableList);
					} else {
						throw new Error('当前流程并未实现获取表单数据功能，请联系管理员！');
					}
				}
			},
			onTaskCommitCallback (success, taskCommitData) {
				let operation = this.commitInfo.operation;
				let formData = this.buildFormData(operation, this.commitInfo.formData, taskCommitData);
				let copyItemList = this.copyItemList;
				if (success) {
					// 启动流程
					if (this.taskDetailsData.processInstanceId == null && this.taskId == null) {
						this.startImpl(operation, formData, copyItemList);
						return;
					}
					// 加签、减签操作
					if (
						[
							this.SysFlowTaskOperationType.CO_SIGN,
							this.SysFlowTaskOperationType.SIGN_REDUCTION,
							this.SysFlowTaskOperationType.BFORE_CONSIGN,
							this.SysFlowTaskOperationType.AFTER_CONSIGN
						].includes(operation.type)
					) {
						// 串行会签前后加签参数
						let after;
						if (
							operation.type === this.SysFlowTaskOperationType.BFORE_CONSIGN ||
							operation.type === this.SysFlowTaskOperationType.AFTER_CONSIGN
						) {
							after = operation.type === this.SysFlowTaskOperationType.BFORE_CONSIGN;
						}
						this.submitConsign(
							(taskCommitData || {}).assignee,
							operation.type === this.SysFlowTaskOperationType.CO_SIGN,
							after
						)
							.then(res => {
								this.handlerClose();
							})
							.catch(e => {});
						return;
					}
					// 自由跳
					if (operation.type === this.SysFlowTaskOperationType.FREE_JUMP) {
						FlowOperationController.freeJump(this, {
							processInstanceId: this.taskDetailsData.processInstanceId,
							sourceTaskId: this.taskId,
							targetTaskKey: (taskCommitData || {}).targetTaskKey,
							delegateAssignee: (taskCommitData || {}).assignee,
							taskComment: (taskCommitData || {}).message,
							taskVariableData: {
								latestApprovalStatus: operation.latestApprovalStatus
							}
						}).then(res => {
							this.handlerClose();
						}).catch(e => {});
						return;
					}
					// 驳回操作
					if (operation.type === this.SysFlowTaskOperationType.REJECT || operation.type === this.SysFlowTaskOperationType.REJECT_TO_TASK) {
						FlowOperationController.rejectRuntimeTask(this, {
							processInstanceId: this.taskDetailsData.processInstanceId,
							taskId: this.taskId,
							targetTaskKey: (taskCommitData || {}).targetTaskKey,
							taskComment: (taskCommitData || {}).message,
							taskVariableData: {
								latestApprovalStatus: operation.latestApprovalStatus
							}
						}).then(res => {
							this.handlerClose();
						}).catch(e => {});
						return;
					}
					// 驳回到起点
					if (operation.type === this.SysFlowTaskOperationType.REJECT_TO_START) {
						FlowOperationController.rejectToStartUserTask(this, {
							processInstanceId: this.taskDetailsData.processInstanceId,
							taskId: this.taskId,
							taskComment: (taskCommitData || {}).message,
							taskVariableData: {
								latestApprovalStatus: operation.latestApprovalStatus
							}
						}).then(res => {
							this.handlerClose();
						}).catch(e => {});
						return;
					}
					// 撤销操作
					if (operation.type === this.SysFlowTaskOperationType.REVOKE) {
						this.$dialog.confirm({
							title: '提示',
							message: '是否撤销此任务？'
						}).then(res => {
							FlowOperationController.revokeHistoricTask(this, {
								processInstanceId: this.taskDetailsData.processInstanceId,
								taskId: this.taskId,
								taskComment: '任务处理人撤销任务',
								taskVariableData: {
									latestApprovalStatus: operation.latestApprovalStatus
								}
							}).then(res => {
								this.handlerClose();
							}).catch(e => {});
						}).catch(e => {});
						return;
					}
					this.submitImpl(operation, formData, copyItemList, taskCommitData).then(res => {
						this.handlerClose();
					}).catch(e => {});
				}
				this.showCommitDlg = false;
			}
		},
		computed: {
			isOnlineForm () {
				return this.formId != null;
			},
			flowOperation () {
				console.log(this.operationList);
				if (Array.isArray(this.operationList)) {
					return this.operationList.map(item => {
						if (item.type === this.SysFlowTaskOperationType.MULTI_SIGN && item.multiSignAssignee != null) {
							let multiSignAssignee = {
								...item.multiSignAssignee
							}
							multiSignAssignee.assigneeList = item.multiSignAssignee.assigneeList ? multiSignAssignee.assigneeList.split(',') : undefined;
							return {
								...item,
								multiSignAssignee
							}
						} else {
							return {
								...item
							}
						}
					});
				} else {
					return [];
				}
			},
			mainOperation () {
				return this.flowOperation.slice(0, 2);
			},
			moreOperation () {
				return this.flowOperation.slice(2);
			},
			moreActions () {
				return this.moreOperation.map(operation => {
					return {
						text: operation.label,
						operation: operation
					}
				});
			}
		},
		onLoad(e) {
			let userInfo = uni.getStorageSync('userInfo')
			const item = JSON.parse(decodeURIComponent(e.passData))
			this.taskDetailsData = item || {}
			this.operationList = item.operationList
			this.isRuntime = item.isRuntime
			this.processDefinitionKey = item.processDefinitionKey
			this.formId = item.formId
			this.readOnly = item.readOnly
			// this.processInstanceId = item.processInstanceId
			this.processDefinitionId = item.processDefinitionId
			this.taskId = item.taskId
			this.flowEntryName = item.flowEntryName
			this.processInstanceInitiator = item.processInstanceInitiator || userInfo.showName
			this.headImageUrl = getHeadImageUrl(item.headImageUrl ? item : userInfo)
			this.taskName = item.taskName
			this.flowStatus = item.flowStatus
			this.operationList = item.operationList
			this.variableList = item.variableList
		}
	}
</script>

<style lang="less" scoped>
	page {
		padding: 0;
	}
.nav-bar {
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 20rpx;

		.text {
			width: calc(100vw - 80px);
			color: #323233;
			font-weight: 500;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			justify-items: center;
		}

		.nav-right {
			display: flex;

			.mobile-font {
				color: #707070;
				font-size: 36rpx;

				&+.mobile-font {
					margin-left: 12rpx;
				}
			}
		}
	}
	.require-span {
		color: red;
		font-style: normal;
		font-weight: bold;
		vertical-align: middle;
		margin-left: 3px;
	}

	.task-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		background-color: #ffffff;
		padding: 32rpx;
		border-bottom: 1px solid #e8e8e8;
	}

	.task-detail .task-info {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		width: 100px;
	}

	.task-details-herder-introduce {
		// height: 232rpx;
		padding: 32rpx;
		position: relative;

		p {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.task-details-herder-title {
		width: 100%;
		font-size: 32rpx;
		line-height: 40rpx;
		height: 40rpx;
		color: #333333;
		font-weight: bold;
		// margin-bottom: 10px;
	}

	.task-details-herder-txt {
		width: 70%;
		color: #666666;
		line-height: 40rpx;
		height: 40rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.task-details-herder-user {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
	}

	.user-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 5px;
		background-color: #333333;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.user-name {
		color: #666666;
		font-size: 0.75rem;
	}

	.task-details-herder-img {
		width: 134rpx;
		height: 106rpx;
	}

	.task-data {
		flex-grow: 1;
		flex-shrink: 1;
		height: 100px;
		margin-top: 32rpx;
		overflow-y: auto;
	}

	.task-input-box {
		display: flex;
		flex-direction: column;
	}

	.task-details-form {
		// padding: 10px;
		background-color: #ffffff;
		border-radius: 8px;

		.task-details-form-title {
			color: #333333;
			font-size: 1rem;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.task-details-form-item {
			width: 100%;
			height: 3.75rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #E5E5E5;

			p {
				color: #333333;
				font-size: 1rem;
			}

			.form-item-value {
				width: 60%;
				text-align: right;
				overflow: hidden;
				text-overflow: ellipsis;
				text-overflow: -o-ellipsis-lastline;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}

		.sub-title {
			color: #999;
			font-size: 0.9rem;
			margin-top: 1rem;
		}

		.file-wrap {
			border-bottom: 1px solid #E5E5E5;
			padding: 1rem 0;

			.wrap-info {
				overflow: hidden;

				.file-icon {
					width: 2rem;
					height: 2rem;
					float: left;
					margin-top: 1rem;
				}

				.right {
					float: left;
					margin-left: 5px;
					margin-top: 8px;

					.name {
						font-size: 16px;
						font-weight: 540;
					}

					.more-info {
						overflow: hidden;
						font-size: 0.8rem;
						margin-top: 4px;

						.size {
							float: left;
							color: #999;
						}

						a {
							float: left;
							margin-left: 2rem;
						}
					}
				}
			}
		}
	}

	.cc-view {
		padding: 16px;
		background-color: #ffffff;
		border-radius: 8px;
		margin: 16px;

		.cc-view-title {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			// margin-bottom: 10px;

			p {
				color: #333333;
				font-size: 16px;
				font-weight: 700;
				margin: 0;
			}

			image {
				width: 24px;
				height: 24px;
			}
		}

		.cc-view-title2 {
			font-size: 14px;
			color: #333333;
			margin-bottom: 10px;
		}

		.cc-view-personnel {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.cc-view-personnel-item {
				padding: 5px;
				display: flex;
				flex-direction: row;
				align-items: center;
				background: #F6F7F9;
				border-radius: 4px;
				margin: 0 10px 10px 0;

				image {
					width: 22px;
					height: 22px;
					border-radius: 50%;
					background: #171A1D;
				}

				p {
					font-size: 12px;
					color: #171A1D;
					margin: 0 5px;
				}

				.close-icon {
					width: 16px;
					height: 16px;
					background: none;
				}
			}
		}
	}

	.steps-item-icon {
		width: 30px;
		height: 30px;
		background: #52B852;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.steps-item-desc {
		margin-left: 10px;

		p {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin: 5px 0;
		}

		span {
			font-size: 12px;
			color: #999999;
		}
	}


	.task-details-floor {
		height: 128rpx;
		padding: 0 16px;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		border-top: 1px solid #E8E8E8;
		.btnn{
			position: relative;
			.btnList{
				animation: all 0.3s;
				position: absolute;
				left: 0;
				// display: none;
				background-color: #fff;
				border-radius: 8px;
				box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12);
				.btnnn{
					height: 2.5rem;
					width: 100px;
					line-height: 2.5rem;
					text-align: center;
				}
			}
		}
		image {
			width: 48rpx;
			height: 48rpx;
		}

		.btn {
			height: 82%;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 0;
			flex: 1;
			&:last-child {
				margin-left: 8px;
			}
		}
	}
	.menu-btn + .menu-btn {
		margin-left: 16rpx;
	}
	.contents {
		background-color: #f6f6f6;
		min-height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99999;
	}
</style>
